<template>
  <div class="edit-base-rate">
    <!-- 重量段设置 -->
    <div class="title">
      <div><span>重量段设置</span> <span class="tip">重量段需要按照从小到大的重量段填写哦</span></div>
    </div>
    <a-form ref="formDataRef" :model="passData" :label-col="{ style: 'width:90px' }" :wrapper-col="{ style: 'calc(100% - 90px)' }" autocomplete="off">
      <a-row :gutter="16">
        <template v-for="(item, index) in passData.weightSegmentList" :key="index">
          <a-col :span="8">
            <a-form-item :label="`重量段${index + 1}`" :name="['weightSegmentList', index, 'minValue']" :rules="[{ required: true, message: '请填写最小值!' }]">
              <a-input-number
                v-model:value="item.minValue"
                :min="index === 0 ? 0 : passData.weightSegmentList[index - 1].maxValue + 0.1"
                :max="item.maxValue ? item.maxValue - 0.1 : 999999.9"
                placeholder="最小值"
                :precision="1"
              ></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="" :name="['weightSegmentList', index, 'maxValue']" :rules="[{ required: true, message: '请填写最大值!' }]">
              <a-input-number v-model:value="item.maxValue" :min="item.minValue + 0.1" :max="maxCalc(index)" placeholder="最大值" :precision="1"></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="" :name="['weightSegmentList', index, 'type']" :rules="[{ required: true, message: '请选择类型!' }]">
              <a-select v-model:value="item.type" placeholder="请选择">
                <a-select-option v-for="(row, i) in dataDict['QUOTATION_WEIGHT_SEGMENT_UNIT']" :key="i" :value="row.code">{{ row.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="">
              <a-button type="primary" @click="addWeightSegmentHandle"><plus-outlined /></a-button>
              <a-button v-if="passData.weightSegmentList.length > 1" @click="deleteWeightSegmentHandle(index)"><minus-outlined /></a-button>
            </a-form-item>
          </a-col>
        </template>
      </a-row>
    </a-form>
    <div class="title">
      <span>运价</span>
      <a-button type="primary" @click="addRateHandle">添加运价+</a-button>
    </div>
    <div class="table-content">
      <vxe-table :data="passData.itemList" border show-overflow ref="rateTable" height="450" :row-config="{ isHover: true }" :sort-config="{ trigger: 'cell' }">
        <vxe-column field="countryList" title="国家" min-width="180" fixed="left">
          <template #default="{ row }">
            <a-select v-model:value="row.countryList" style="width: 100%" mode="multiple" :max-tag-count="1" placeholder="请选择" allowClear>
              <a-select-option v-for="(item, index) in countryOpts" :key="index" :value="item.id">{{ item.countryRegionName }}</a-select-option>
            </a-select>
          </template>
        </vxe-column>
        <vxe-column field="region" title="分区" show-overflow="title" min-width="160" fixed="left">
          <template #default="{ row }">
            <a-input v-model:value="row.region" placeholder="请输入" allowClear></a-input>
          </template>
        </vxe-column>
        <vxe-column field="city" title="城市" show-overflow="title" min-width="160" fixed="left">
          <template #default="{ row }">
            <a-input v-model:value="row.city" placeholder="请输入" allowClear></a-input>
          </template>
        </vxe-column>
        <template v-if="hasWeight">
          <vxe-colgroup v-for="(item, index) in passData.weightSegmentList || []" :key="index" :title="`${item.minValue}-${item.maxValue}`">
            <template v-if="['UNIT'].includes(item.type)">
              <vxe-column field="unitPrice" title="单价" min-width="140">
                <template #default="{ row }">
                  <a-input-number v-model:value="row.detailsList[index].unitPrice" :min="0" placeholder="单价"></a-input-number>
                </template>
              </vxe-column>
            </template>
            <template v-else-if="['AMOUNT'].includes(item.type)">
              <vxe-column field="amount" title="金额" min-width="140">
                <template #default="{ row }">
                  <a-input-number v-model:value="row.detailsList[index].amount" :min="0" placeholder="金额"></a-input-number>
                </template>
              </vxe-column>
            </template>
            <template v-else-if="item.type === 'CON_WEIGHT'">
              <vxe-column field="firstWeight" title="首重重量" min-width="140">
                <template #default="{ row }">
                  <a-input-number v-model:value="row.detailsList[index].firstWeight" :min="0" placeholder="首重重量"></a-input-number>
                </template>
              </vxe-column>
              <vxe-column field="firstPrice" title="首重价格" min-width="140">
                <template #default="{ row }">
                  <a-input-number v-model:value="row.detailsList[index].firstPrice" :min="0" placeholder="首重价格"></a-input-number>
                </template>
              </vxe-column>
              <vxe-column field="continuationWeight" title="续重重量" min-width="140">
                <template #default="{ row }">
                  <a-input-number v-model:value="row.detailsList[index].continuationWeight" :min="0" placeholder="续重重量"></a-input-number>
                </template>
              </vxe-column>
              <vxe-column field="continuationPrice" title="续重价格" min-width="140">
                <template #default="{ row }">
                  <a-input-number v-model:value="row.detailsList[index].continuationPrice" :min="0" placeholder="续重价格"></a-input-number>
                </template>
              </vxe-column>
            </template>
          </vxe-colgroup>
        </template>
        <vxe-column field="action" title="操作" min-width="90" fixed="right">
          <template #default="{ rowIndex }">
            <a-button type="link" danger @click="deleteRateHandle(rowIndex)">删除</a-button>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <div class="time">
      <label for="#">生效时间</label>
      <a-date-picker style="width: 240px" v-model:value="passData.beginTime" show-time placeholder="选择生效时间" />
    </div>
    <div class="modal-submit-btn-wrapper">
      <a-button type="primary" v-debounce @click="submitHandle">保 存</a-button>
      <a-button @click="cancelHandle">取 消</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { PlusOutlined, MinusOutlined } from "@ant-design/icons-vue";
import { computed, inject, toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import CommonHook from "@/hook/commonHook";
import { cloneDeep } from "lodash";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: WarehouseEntryChannel.ListRows;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", visible: boolean): void;
  (e: "submit"): void;
  (e: "editBaseSubmit"): void;
}>();
const countryOpts = inject<Array<Base.GeneraDataType>>("countryOpts");
const { dataDict } = CommonHook();
const { visible, passData } = toRefs(props);
const { formDataRef, initForm } = InitHook();
const { submitHandle, addWeightSegmentHandle, deleteWeightSegmentHandle, addRateHandle, deleteRateHandle, cancelHandle } = OperationHook({ formDataRef, passData, initForm, emit });
const maxCalc = (index: number) => {
  if (passData.value.weightSegmentList.length > 1) {
    if (index !== passData.value.weightSegmentList.length - 1) return passData.value.weightSegmentList[index + 1].minValue - 0.1;
    else return 999999.9;
  } else {
    return 999999.9;
  }
};
const hasWeight = computed<boolean>(() => {
  const flag = passData.value.weightSegmentList.some((t: any) => (t.minValue !== 0 && !t.minValue) || (t.maxValue !== 0 && !t.maxValue) || !t.type);
  if (passData.value.weightSegmentList.length === 1 && flag) return false;
  else return true;
});

const init = () => {
  if (!passData.value.weightSegmentList.length) {
    initForm.value = cloneDeep({
      weightSegmentList: passData.value.weightSegmentList,
      itemList: passData.value.itemList
    });
    passData.value.weightSegmentList = [
      {
        minValue: undefined,
        maxValue: undefined,
        type: undefined
      }
    ];
  } else {
    initForm.value = cloneDeep({
      weightSegmentList: passData.value.weightSegmentList,
      itemList: passData.value.itemList
    });
  }
};
init();
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      init();
    }
  }
);
</script>
<style lang="stylus" scoped>
.edit-base-rate{
    padding-bottom: 60px;
    .title{
        font-weight: 600;
        font-size: 16px;
        padding-bottom: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .tip{
            font-size: 12px;
            color: #ccc;
            padding-left: 8px;
        }
    }
    :deep(.ant-input-number){
        width: 100%;
    }
    .table-content{
        // height: calc(100vh - 360px);
    }
    .time{
        display: flex;
        align-items: center;
        margin-top: 12px;
        >label{
            margin-right: 8px;
        }
    }
    .modal-submit-btn-wrapper{
        :deep(.ant-btn){
            margin-right: 8px;
        }
    }
}
</style>
